<template>
    <!-- 过渡效果示例 -->
    <div>
    <button @click="isShow=!isShow">show/hide</button>
    <!-- transition是vue的标签 -->
    <!-- 要写成表达式，appear首次加载时显示动画 -->
    <!-- <transition :appear="true"> -->
    <!-- 可以简写成 -->
    <!-- <transition name="hello" appear>
        <h1 v-show='isShow'>test2</h1>
    </transition> -->
    <!-- 多个元素用transition-group -->
    <transition-group name="hello" appear>
        <!-- 每个元素要使用不同的key -->
        <h1 v-show='isShow' key="01">test1</h1>
        <h1 v-show='!isShow' key="02">test2</h1>
        <h1 v-show='isShow' key="03">test3</h1>
        <h1 v-show='!isShow' key="04">test52</h1>
        <h1 v-show='isShow' key="05">test2666</h1>
        <h1 v-show='!isShow' key="06">test26</h1>
        <h1 v-show='isShow' key="07">test266</h1>
        <h1 v-show='!isShow' key="08">test26</h1>
        <h1 v-show='isShow' key="09">te66666666666st2</h1>
    </transition-group>
    </div>  
</template>

<script>
    export default {
        name : "Test2",
        data(){
            return {
                isShow:true
            }
        }
    }
</script>

<style scoped>

    h1{
        background-color: orange;
    }

    .hello-enter-active,.hello-leave-active{
        transition: 2.3s linear;
    }

    /* 进入的起点，离开的终点 */
    .hello-enter,.hello-leave-to{
        transform:translateY(1000%) translateX(10%) scale(1%);
        background-color:blue !important;
    }

    /* 进入的终点，离开的起点 */
    .hello-enter-to,.hello-leave{
        background-color:blue !important;
        transform:translateY(0);
    }

</style>